<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>湖外湖点餐系统</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <meta name="description" content="Portfolio Zoom Slider with jQuery" />

        <meta name="keywords" content="jquery, plugin, slider, zoom, portfolio, cloud-zoom"/>

		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>

        <link rel="stylesheet" type="text/css" href="css/style.css" />

		<link rel="stylesheet" type="text/css" href="cloud-zoom/cloud-zoom.css" />

		<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />

		<script src="js/cufon-yui.js" type="text/javascript"></script>

		<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
		
 <style type="text/css">
    body{
		 
		margin: 0px;
		padding: 0px;
		font-size: 12px;
		font-family: Arial;
	 
      }
	  #container{
		width: 1368px;
		background: #f2f2f2;
		text-align: left;
		margin: 0px auto;

	  }
	  #hyh-bestup{
		  margin: 0px;
		  padding: 0px;
		  width:1368px;
		  height:42px;
		  background: #444444;
	  }
	   #hyh-bestup-down1{
		  margin: 0px ;
		  padding: 0px;
		  width:1368px;
		  height:42px;
		  background: #020202;
		  clear:both;
		  float:left;
	  }
	  #hyh-bestup-down2{
		  margin:0px;
		  padding:0px;
		  height:42px;
		  line-height:42px;
	  }
	  #hyh-bestup-down3{
		  margin: 5px 90px 5px 0px ;
		  padding: 0px;
		  width:180px;
		  height:37px;
		  background: #020202;
		  clear:both;
		  float:left;
	  }
	  #hyh-bestup-down1 li,#hyh-bestup-down1 li a{
		  float:left;
		  line-height: 42px;
		  display: block;
		  text-align:center;
		  width:100px;
		  margin-left:140px;
		  padding:0px;
		  font-size:14px;
		  list-style-type: none;
		  text-decoration:none;
		  color:#FFF;
	  }
	  #hyh-bestup-down1 ul li a:hover{
		  color:#a6a6a6;
		  text-decoration:blink;
	  }
	  
	  #clear{
		  width:1368px;
		  height:0px;
		  clear:both;
	  }
	  #footer_line{
		  width:1268px;
		  border: 1px solid #b2b2b2;
		  margin:20px 100px 2px 100px;
		  padding:0px;
		  float:left;
		  clear:both;
	  }
	  #footer{
		  width:1368px;
		  height:12px;
		  margin:5px 100px;
		  float: left;
		  clear: both;
	  }
	  #footer_left{
		  width:230px;
		  height:12px;
		  margin:0px;
		  padding:3px;
		  float:left;
		  clear:both;
	  }
	  #footer_right{
		  width:800px;
		  height:14px;
		  margin:0px;
		  padding:0px;
		  float:left;
	  }
 </style> 


		<script type="text/javascript">

			Cufon.replace('h1',{ textShadow: '1px 1px #D1EF95'});

			

			Cufon.replace('.footer');

		</script>

    </head>

    <body>
    <div id="container">
	<div id="hyh-bestup">
    </div>
    <div id="hyh-bestup-down1">
	<ul>
		<div id="hyh-bestup-down3">
		<li><a href="own.html"><img src="images/hyh_text.png"></a></li>
		</div>
        <div id="hyh-bestup-down2">
		<li><a href="everybody.html">大众登录</a></li>
		<li><a href="#">VIP登录</a></li>
		<li><a href="#">关于我们</a></li>
        </div>
	</ul>
    </div>
   
    


		<div class="wrapper">

		    <div id="content" class="content">

				<div class="item">

					<div class="thumb_wrapper">

						<div class="thumb">

							<ul>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack1.jpg"><img src="images/thumbs/formstack1.jpg" alt="Formstack 1"/></a></li>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack2.jpg"><img src="images/thumbs/formstack2.jpg" alt="Formstack 2"/></a></li>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack3.jpg"><img src="images/thumbs/formstack3.jpg" alt="Formstack 3"/></a></li>

							</ul>

						</div>

						<a class="prev" href="#"></a>

						<a class="next" href="#"></a>

						

					</div>

					<div class="description">

						<h2 >东坡肉</h2>

						<p>东坡肉属浙菜菜系，以猪肉为主要食材。菜品薄皮嫩肉，色泽红亮，味醇汁浓，酥烂而形不碎，香糯而不腻口。</p>

                       <p>东坡肉属浙菜菜系，以猪肉为主要食材。菜品薄皮嫩肉，色泽红亮，味醇汁浓，酥烂而形不碎，香糯而不腻口。东坡肉色、香、味俱佳，深受人们喜爱。慢火，少水，多酒，是制作这道菜的诀窍。东坡肉用猪肉炖制而成，一般是一块约二寸许的方正形猪肉，一半为肥肉，一半为瘦肉，入口肥而不腻，带有酒香，十分美味。</p>


					</div>

				</div>
			</div>	

        </div>
				
				

				



				

		

		



		<!-- The JavaScript -->

		<script src="http://www.jq22.com/jquery/jquery-1.6.2.js"></script>

		<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>

		<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>

		<script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>

		<script type="text/javascript">

			$(function() {

				/*

				fancybox init on each cloud-zoom element

				 */

				$("#content .cloud-zoom").fancybox({

					'transitionIn'	:	'elastic',

					'transitionOut'	:	'none',

					'speedIn'		:	600,

					'speedOut'		:	200,

					'overlayShow'	:	true,

					'overlayColor'	:	'#000',

					'cyclic'		:	true,

					'easingIn'		:	'easeInOutExpo'

				});



				/*

				because the cloud zoom plugin draws a mousetrap

				div on top of the image, the fancybox click needs

				to be changed. What we do here is to trigger the click

				the fancybox expects, when we click the mousetrap div.

				We know the mousetrap div is inserted after

				the <a> we want to click:

				 */

				$("#content .mousetrap").live('click',function(){

					$(this).prev().trigger('click');

				});



				/*

				the content element;

				each list item / group with several images

				 */

				var $content	= $('#content'),

				$thumb_list = $content.find('.thumb > ul');

				/*

				we need to set the width of each ul (sum of the children width);

				we are also defining the click events on the right and left arrows

				of each item.

				 */

				$thumb_list.each(function(){

					var $this_list	= $(this),

					total_w		= 0,

					loaded		= 0,

					//preload all the images first

					$images		= $this_list.find('img'),

					total_images= $images.length;

					$images.each(function(){

						var $img	= $(this);

						$('<img/>').load(function(){

							++loaded;

							if (loaded == total_images){

								$this_list.data('current',0).children().each(function(){

									total_w	+= $(this).width();

								});

								$this_list.css('width', total_w + 'px');



								//next / prev events



								$this_list.parent()

								.siblings('.next')

								.bind('click',function(e){

									var current = $this_list.data('current');

									if(current == $this_list.children().length -1) return false;

									var	next	= ++current,

									ml		= -next * $this_list.children(':first').width();



									$this_list.data('current',next)

									.stop()

									.animate({

										'marginLeft'	: ml + 'px'

									},400);

									e.preventDefault();

								})

								.end()

								.siblings('.prev')

								.bind('click',function(e){

									var current = $this_list.data('current');

									if(current == 0) return false;

									var	prev	= --current,

									ml		= -prev * $this_list.children(':first').width();



									$this_list.data('current',prev)

									.stop()

									.animate({

										'marginLeft'	: ml + 'px'

									},400);

									e.preventDefault();

								});

							}

						}).attr('src',$img.attr('src'));

					});

				});

			});

        </script>

    </body>

</html>